<template>
  <div class="pagestyle qkjpj">
    <div
      class="fbc"
      :style="{ background: isDark ? 'rgba(255, 255, 255, 0.8)' : '' }"
    >
      <span>全矿井评价</span>
      <span
        :class="state.addModal ? 'listInfoBtn active' : 'listInfoBtn'"
        @click="addBtn"
      >
        <svg-icon
          :class="state.addModal ? 'active' : ''"
          class-name="search-icon"
          icon-class="xinzeng"
        />
        新增评价
      </span>
    </div>
    <div class="pingjiaBottom">
      <div
        class="bengItem"
        v-for="(item, index) in state.centerData"
        :key="index"
      >
        <div class="bengItem-1 fbc">
          <span class="titles">{{ item.txt }}</span>
          <span>
            <span class="btn" @click="chakanBtn">查看配置</span>
            <span class="btn" @click="xiugaiBtn" style="margin: 0 15px"
              >修改配置</span
            >
            <span class="btn" @click="meiriBtn">每日抽采</span>
          </span>
        </div>
        <div class="bengItem-2">
          <span class="leftTxt">评价开始时间</span>
          <span class="rightTxt">2025/11/22 09::33</span>
        </div>
        <div class="bengItem-3">
          <div class="topTabs fbc">
            <div v-for="(item2, index2) in item.tabsData" :key="index2">
              <span
                @click="tabsClick(item, index2)"
                class="its"
                :class="{ tabsActive: item.activeTabIndex == index2 }"
                >{{ item2 }}</span
              >
            </div>
          </div>
          <div class="btmContainer">
            <div class="btmItem fbc">
              <span class="btmItemLeft">抽放标况纯量</span>
              <span class="btmItemRight">2025m³</span>
            </div>
            <div class="btmItem fbc">
              <span class="btmItemLeft">风排标况纯量</span>
              <span class="btmItemRight">2025m³</span>
            </div>
            <div class="btmItem fbc">
              <span class="btmItemLeft">抽放率</span>
              <span class="btmItemRight">20%</span>
            </div>
            <div class="btmItem fbc">
              <span class="btmItemLeft">达标结果</span>
              <span class="btmItemRight colorRed">未达标</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="660"
        :height="auto"
        v-model="state.addModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">
            {{ state.modalTitle }}
          </div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formRef"
              :model="state.formData"
              :rules="state.formRules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="名称" prop="workingFaceIds">
                    <el-select
                      v-model="state.formData.workingFaceIds"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.nameSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="抽采开始时间" prop="placeName">
                    <el-date-picker
                      style="width: 100%"
                      v-model="state.formData.date"
                      type="date"
                      placeholder="请选择日期"
                      value-format="YYYY-MM-DD"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="送风巷瓦斯涌出" prop="workingFaceIds">
                    <el-select
                      v-model="state.formData.workingFaceIds"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.nameSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="回风巷瓦斯涌出" prop="workingFaceIds">
                    <el-select
                      v-model="state.formData.workingFaceIds"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.nameSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="逻辑对象名称" prop="workingFaceIds">
                    <el-select
                      v-model="state.formData.workingFaceIds"
                      placeholder="请选择"
                      style="width: 100%"
                    >
                      <el-option
                        v-for="(item, index) in state.nameSelectData"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注" prop="workingFaceIds">
                    <el-input
                      v-model="state.formData.workingFaceIds"
                      placeholder="请输入"
                      type="textarea"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancelModal">取消</el-button>
          <el-button type="primary" @click="submitForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 查看 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="660"
        :height="auto"
        v-model="state.detailModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">查看</div>
        </template>
        <template #default>
          <div class="details fbc">
            <div class="details-item">
              <div class="details-item-title">名称</div>
              <div class="details-item-content">工作面1</div>
            </div>
            <div class="details-item">
              <div class="details-item-title">评价开始时间</div>
              <div class="details-item-content">2022/11/22 14:09</div>
            </div>
            <div class="details-item">
              <div class="details-item-title">送风巷瓦斯涌出</div>
              <div class="details-item-content">888</div>
            </div>
          </div>
          <div class="details fbc">
            <div class="details-item">
              <div class="details-item-title">回风巷瓦斯涌出</div>
              <div class="details-item-content">999</div>
            </div>
            <div class="details-item">
              <div class="details-item-title">逻辑对象名称</div>
              <div class="details-item-content">逻辑对象1</div>
            </div>
            <div class="details-item">
              <div class="details-item-title">备注</div>
              <div class="details-item-content">无</div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="detailCancelModal">取消</el-button>
          <el-button type="primary" @click="detailSubmitForm"> 修改 </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 每日抽采 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="1200"
        :height="auto"
        v-model="state.choucaiModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">每日抽采</div>
        </template>
        <template #default>
          <div class="form_box">
            <div class="zcbt">
              <div class="searchs">
                <el-form :model="state.searchData" class="forms">
                  <el-row :gutter="20">
                    <el-col :span="6">
                      <el-form-item label="时间">
                        <el-date-picker
                          v-model="state.searchData.time"
                          type="daterange"
                          range-separator="-"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          size="small"
                          :value-format="'YYYY-MM-DD'"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label=" ">
                        <el-button @click="queryFn" size="small" type="primary"
                          >查询</el-button
                        >
                        <el-button @click="resetFn" size="small"
                          >重置</el-button
                        >
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
              <div class="liebiao">
                <div class="liebiaoBottom">
                  <vxe-table
                    height="340"
                    :data="state.tableData"
                    border="inner"
                  >
                    <vxe-column type="checkbox" :width="55"></vxe-column>
                    <vxe-column
                      type="seq"
                      :width="55"
                      title="序号"
                    ></vxe-column>
                    <vxe-column
                      v-for="(item, index) in state.tableheads"
                      :field="item.field"
                      :title="item.title"
                      :params="{ name: item.name }"
                      :width="item.width ? item.width : ''"
                      :key="index"
                    >
                      <!-- 是否终孔 -->
                      <template
                        #default="{ row }"
                        v-if="item.field === 'finalDrill'"
                      >
                        <div>
                          <span>{{
                            row[item.field] === true ? "是" : "否"
                          }}</span>
                        </div>
                      </template>
                    </vxe-column>
                  </vxe-table>
                  <div
                    v-if="state.pageconfig.total > 0"
                    class="w100 pagevxe"
                    style="height: 35px"
                  >
                    <el-pagination
                      class="globalFontSize"
                      :class="{ pages: settingsStore.isDark }"
                      v-model:current-page="state.pageconfig.currentPage"
                      v-model:page-size="state.pageconfig.pageSize"
                      :page-sizes="[10, 20, 30, 40]"
                      background
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="state.pageconfig.total"
                      @size-change="sizePage"
                      @current-change="currentPage"
                      style="position: absolute; bottom: 16px; right: 16px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template #footer>
          <el-button @click="choucaiCancelModal">取消</el-button>
          <el-button type="primary" @click="choucaiSubmitForm">
            确定
          </el-button>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>
<script setup>
import useSettingsStore from "@/store/modules/settings";
import { table_headers } from "@/components/commonCom/table_headersChoucai";
const settingsStore = useSettingsStore();
const isDark = computed(() => settingsStore.isDark);
const { proxy } = getCurrentInstance();
let state = reactive({
  addModal: false,
  modalTitle: "新增",
  formData: {},
  formRules: {},
  nameSelectData: [],
  detailModal: false,
  choucaiModal: false,
  tableData: [],
  tableheads: computed(() => table_headers.DrainageDrill),
  pageconfig: {
    currentPage: 1,
    pageSize: 10,
    total: 0,
  },
  searchData: {},
  centerData: [
    {
      txt: "泵1",
      value: "1",
      time: "2025/11/22 09::33",
      activeTabIndex: 0,
      tabsData: ["实时抽采", "日抽采", "月抽采", "总抽采"],
    },
  ],
});
const tabsClick = (item, index) => {
  item.activeTabIndex = index;
  console.log(item, index);
};
//新增
const addBtn = () => {
  state.modalTitle = "新增";
  state.addModal = true;
};
const cancelModal = () => {
  state.addModal = false;
  state.formData = {};
};
const submitForm = () => {
  console.log(state.formData);
  // state.addModal = false;
  proxy.$refs.formRef.validate((valid) => {
    if (valid) {
    }
  });
};

//查看配置
const chakanBtn = () => {
  state.detailModal = true;
};
//修改配置
const xiugaiBtn = () => {
  state.addModal = true;
  state.modalTitle = "修改";
};
const detailCancelModal = () => {
  state.detailModal = false;
};
const detailSubmitForm = () => {
  console.log("修改");
  state.modalTitle = "修改";
  state.addModal = true;
};
//每日抽采
const meiriBtn = () => {
  state.choucaiModal = true;
};
const choucaiCancelModal = () => {
  state.choucaiModal = false;
};
const choucaiSubmitForm = () => {
  console.log("确定");
  // state.choucaiModal = false;
};
//搜索
const queryFn = () => {
  console.log("查询");
};
const resetFn = () => {
  console.log("重置");
};
//分页
const sizePage = (size) => {
  state.pageconfig.pageSize = size;
};
const currentPage = (currentPage) => {
  state.pageconfig.currentPage = currentPage;
};
</script>

<style lang="scss" scoped>
.qkjpj {
  height: calc(100% - 10px);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: -2px 0px 20px rgba(91, 109, 128, 0.08);
  margin-top: 10px;
  padding: 10px;
}
.pingjiaBottom {
  margin-top: 10px;
  overflow-y: auto;
  height: calc(100% - 40px);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  .bengItem {
    width: 415px;
    height: 275px;
    opacity: 1;
    border-radius: 4px;
    background: rgba(255, 255, 255, 1);
    padding: 16px 16px 16px 16px;
    .bengItem-1 {
      width: 100%;
      .titles {
        font-size: 14px;
        font-weight: 700;
      }
      .btn {
        font-size: 12px;
        cursor: pointer;
        color: #4488ff;
        border-bottom: 1px solid #4488ff;
      }
    }
    .bengItem-2 {
      margin: 15px 0;
      .leftTxt {
        font-size: 14px;
        color: #999999;
      }
      .rightTxt {
        font-size: 14px;
        margin-left: 15px;
      }
    }
    .bengItem-3 {
      width: 100%;
      .topTabs {
        .its {
          background-color: #f2f4f5;
          padding: 6px 20px;
          border-radius: 3px;
          cursor: pointer;
          font-size: 14px;
        }
        .tabsActive {
          background-color: #4488ff;
          color: #fff;
        }
      }
      .btmContainer {
        margin-top: 10px;
        .btmItem {
          margin: 20px 0;
          .btmItemLeft {
            font-size: 14px;
            color: #999;
          }
          .btmItemRight {
            font-size: 14px;
          }
          .colorGreen {
            color: #55f30b;
            letter-spacing: 2px;
          }
          .colorRed {
            color: red;
            letter-spacing: 2px;
          }
        }
      }
    }
  }
}
// 查看
.details {
  background-color: #f9f9fa;
  border-radius: 3px;
  padding: 10px 0 5px 25px;
  .details-item {
    width: 20%;
    .details-item-title {
      font-size: 14px;
      color: #999;
      margin-bottom: 5px;
    }
    .details-item-content {
      font-size: 14px;
      color: #333;
      margin-bottom: 5px;
    }
  }
}
// 每日抽采
.zcbt {
  .searchs {
    width: 100%;
    // height: 40px;
    border-radius: 4px;
    padding: 5px 10px 0;
    background: rgba(91, 109, 128, 0.04);
    .el-col {
      margin: 0px 5px 0;
      height: 36px;
    }
  }
  .liebiao {
    margin-top: 10px;
    .liebiaoBottom {
      margin-top: 10px;
    }
  }
}
</style>